<template>
  <!-- 表头：标题，操作按钮 -->
  <el-row :gutter="20">
    <el-col :span="12">
      <h2>学生管理</h2>
    </el-col>
    <el-col :span="12">
      <div style="float: right; padding-top: 15px">
        <el-form
          :model="queryData"
          :inline="true"
        >
          <el-form-item>
            <el-button
              icon="Plus"
              type="success"
              @click="handleAdd"
            >
              添加
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>

  <el-table
    v-loading="tableLoading"
    :data="table.data"
    border
    stripe
    style="width: 100%"
  >
    <el-table-column
      prop="id"
      label="Id"
      width="100"
    />
    <el-table-column
      prop="collegeName"
      label="学院"
    />
    <el-table-column
      prop="no"
      label="学号"
    />
    <el-table-column
      prop="name"
      label="姓名"
    />
    <el-table-column
      prop="age"
      label="年龄"
    />
    <el-table-column
      prop="birthday"
      label="出生日期"
    />
    <el-table-column
      fixed="right"
      label="Operations"
      width="190"
    >
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          icon="Edit"
          @click="handlePhoto(scope.row)"
        >
          照片
        </el-button>
        <el-button
          link
          type="primary"
          size="small"
          icon="Edit"
          @click="handleUpdate(scope.row)"
        >
          编辑
        </el-button>
        <el-button
          link
          type="warning"
          size="small"
          icon="Delete"
          @click="handleDelete(scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-show="table.total > 0"
    v-model:current-page="queryData.page"
    v-model:page-size="queryData.size"
    small
    background
    :total="table.total"
    @current-change="doQuery"
  />
  <!-- 添加、编辑对话框 -->
  <form-dialog
    ref="form"
    :data-api="dataApi"
    :select-data="selectData"
    @save="doQuery"
  />
  <!--  照片上传-->
  <photo-upload
    ref="photo"
    :data-api="dataApi"
    @save="doQuery"
  />
</template>

<script>
// import { Delete, Edit, Plus } from '@element-plus/icons-vue'
import DataApi from "../../api/data-api.js"
import FormDialog from './StudentFormDialog.vue'
import PhotoUpload from './PhotoUpload.vue'

export default {
  name: "Student",
  components: {FormDialog, PhotoUpload},
  data() {
    return {
      dataApi: new DataApi('student'),
      // 查询条件
      queryData: {
        page: 1,
        size: 5,
      },
      // 表格数据
      table: {
        data: [],
        total: 0
      },
      // 表格加载
      tableLoading: false,
      // 下拉选择框数据
      selectData: {
        collegeId: []
      },
    }
  },
  created() {
    this.loadSelectData()
    this.doQuery()
  },
  methods: {
    // 查询数据
    doQuery() {
      this.tableLoading = true
      // 新建查询data，去掉不必要的filter
      this.dataApi.query(this.queryData).then((res) => {
        console.log(res)
        this.table.data = res.data.items
        this.table.total = res.data.total
      })
      this.tableLoading = false
    },
    // 准备下拉选择框中的选项数据
    async loadSelectData() {
      // const res = await request.get('/demo-model/select-data')
      const res = await this.dataApi.getSelectData()
      for (const key of Object.keys(res.data)) {
        if (this.selectData[key]) {
          this.selectData[key] = res.data[key]
        }
      }
    },
    handleAdd() {
      this.$refs.form.handleAdd()
    },
    // 处理编辑
    handleUpdate(row) {
      this.$refs.form.handleUpdate(row)
    },
    // 删除
    handleDelete(row) {
      console.log(row)
      this.$confirm(`此操作将永久删除【${row['name']}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dataApi.delete(row['id']).then(() => {
          this.doQuery()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 照片
    handlePhoto(row) {
      this.$refs.photo.handleUpload(row)
    }
  }
}
</script>

<style scoped>

</style>